<template>
	<view class="user">
		<view class="user_head">
			<!-- 头部视图 -->
			<image class="baseImg" src="../../static/mine_top_bg.png" mode="scaleToFill" ></image>
			<view class="user-info">
					<!-- 头像 -->
					<image class="avater" :src='headerPic' mode="widthFix" @click="btnShowHeaderClick"></image>
					<view class="nickName">你好 家长</view>
			</view>
			<!-- 订单列表 -->
			<view class="order-info">
				<view class="oeder-menu">
					<view class="order-item" @click="onSkipOrder(0)">
						<view class="icon">
							<image src="../../static/order_dzf_icon.png" class="icon-image"></image>
							<text class="num" v-if="orderList[0] > 0">{{orderList[0]}}</text>
						</view>
						<view class="title">{{i18n.orderType1}}</view>
					</view>
					<view class="order-item"  @click="onSkipOrder(1)">
						<view class="icon">
							<image src="../../static/order_dsh_icon.png" class="icon-image"></image>
							<text class="num" v-if="orderList[1] > 0">{{orderList[1]}}</text>
						</view>
						<view class="title">{{i18n.orderType2}}</view>
					</view>
					<view class="order-item" @click="onSkipOrder(2)">
						<view class="icon">
							<image src="../../static/order_sh_icon.png" class="icon-image"></image>
							<text class="num" v-if="orderList[2] > 0">{{orderList[2]}}</text>
						</view>
						<view class="title">{{i18n.orderType3}}</view>
					</view>
					<view class="order-item" @click="onSkipOrder(3)">
						<view class="icon">
							<image src="../../static/order_all_icon.png" class="icon-image"></image>
							<text class="num" v-if="orderList[3] > 0">{{orderList[3]}}</text>
						</view>
						<view class="title">{{i18n.orderType4}}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 我的服务 -->
		<view class="myService">
			<view class="service">
				<view class="service-title">
				  <image  src="../../static/serviceIcon.png" mode="scaleToFill"></image>
				  <view class="labTitle">{{ i18n.serviceName }}</view>
				</view>
				<view class="service-menu">
					<view class="item" v-for="(item,index) in seviceList" :key="index" @click="myServiceClick(index)">
						<view class="icon">
							<image :src="item.image" class="icon-image"></image>
						</view>
						<view class="title">
							<text v-if="index == 0">{{i18n.serviceType1}}</text>
							<text v-if="index == 1">{{i18n.serviceType2}}</text>
							<text v-if="index == 2">{{i18n.serviceType3}}</text>
							<text v-if="index == 3">{{i18n.serviceType4}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fuwu" v-if="childList.length >0">
			<view class="order-title">
				<view class="title1">
				 <image  src="../../static/fuwuIcon.png" mode="scaleToFill"></image>
				 <view class="labTitle">
				 	{{ i18n.myChild }}
				 </view>
				</view>
				<view class="title2" @click="btnEditChild">
				{{ i18n.myChildR }}
				<uni-icons type="arrowright" size="10" color="#666"></uni-icons>
				</view>
			
			</view>
			<swiper class="swiperContainer" :autoplay="false" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index1) in childList" :key="index1">
					<view class="company" >
						<view class="comInfo">
							<image src="../../static/father.png" mode="widthFix"></image>
						    <view class="comInfoDetail">
						    	<view class="nihao">{{item.stuName}}</view>
								<view class="companyName">{{item.schoolName}}</view>
								<view class="infoSex">{{item.gradeName}}/{{item.className}}   {{item.sex | showSex}}</view>
						    </view>
						</view>
						<!-- <image src="../../static/mineKefu.jpeg" mode=""></image> -->
						<view class="all_select_box" @click="btnChangeCheckbox(item.stuId)">	
							<uni-icons :type="item.stuId == izDefaultIndexId?'checkbox-filled':'circle'" :color="item.stuId == izDefaultIndexId?'#5360FF':'#ccc'" size="25"></uni-icons>	
						</view>
					</view>
				</swiper-item>
			</swiper>
			
		</view>
	</view>
	<!-- <image src="../../static/order_dsh_icon.png" mode=""></image> -->
</template>

<script>
	const globalData = getApp().globalData
	import {listStu,delStu,defaultStu,uesrQueryById} from '../../api/index.js'
	export default {
		data() {
			return {
				allChecked:false,
				orderList: [0,0,0,0],
				seviceList: [{
						"title": '',
						"image": '../../static/mine_message_icon_pure.png',	
					},
					{
						"title": '',
						"image": '../../static/mine_address_icon_pure.png',
						
					},
					{
						"title": '',
						"image": '../../static/mine_setting_icon_pure.png',
						
					},
					{
						"title": '',
						"image": '../../static/mine_customer_icon_pure.png',
						
					}
					
				],
				headerPic:'../../static/universal_head_def.png',
				userId:undefined,
				AppLogin:false,
				childList:[],
				userInfo:{},
				izDefaultIndexId:-1,
				isRefresh:true,
				shopStop:true
				
			}
		},
		computed: {
		  i18n() {
		    return globalData.$t('mina')
		  }
		},
		onLoad() {
			 
			 // let msgDict = getApp().globalData.$t('mina');
			 
			 
		     this.userId = getApp().globalData.userId
			 
			 
		},
		onShow() {
		   
           let AppLogin  = getApp().globalData.AppLogin;
		   this.AppLogin = AppLogin;
			   
           if (AppLogin) {
			   
			   setTimeout(()=>{
				   this.getUesrQueryById()
				   this.listStus('');
			   },500)
			   
			   
           }else{
			   this.headerPic = '../../static/universal_head_def.png'
			   this.childList = [];
			   
		   }
		},
		onPullDownRefresh() {
			if (this.AppLogin) {
			   this.isRefresh = false;
			   this.listStus('');
			
			}
		},
		filters:{
			getName: function(param,AppLogin) {
				  if (AppLogin) {
					  
					  if (param == '') {
					  	 return '斑鸠用户';
					  } else{
					  	 return param;
					  }
				  }else{
					  return '点击登录'
				  }
				}
		},
		methods: {
			
			async listStus(){
				
				let {result} = await listStu({userId:this.userId});
				
				if (result == undefined || result == null) {
					this.childList = []
					this.changeNeedAddStudent('0');
					return
				}else if(result.length == 0){
					this.changeNeedAddStudent('0');
					
					this.childList = []
					
				}else{
					this.changeNeedAddStudent('1');
					
					this.childList = result;
					result.filter((v,i)=>{
						// console.log('v.izDefault',v.izDefault)
						if (v.izDefault == '1') {
							// this.globalData.appSchoolId = uni.getStorageSync('appSchoolId');
							// this.globalData.stuId = uni.getStorageSync('stuId');
							
							getApp().globalData.stuId = v.stuId;
							uni.setStorage({
								key:'stuId',
								data:v.stuId
							})	
							getApp().globalData.appSchoolId = v.schoolId;
							uni.setStorage({
								key:'appSchoolId',
								data:v.schoolId
							})
							
							
							this.izDefaultIndexId = v.stuId
							return
						}
						
					})
					
					
				}
			   uni.stopPullDownRefresh()
			
			},
			async NewDefaultStu(stuId){
				// console.log('手机号码',schoolCode)
			  	try{
					
					let {result} = await defaultStu({willSetDefStuId:stuId,curDefStuId:this.izDefaultIndexId});
					uni.showToast({
						icon:'none',
						title:'切换成功'
						
					},400)
					
					this.izDefaultIndexId = stuId;
					getApp().globalData.stuId = stuId;
					uni.setStorage({
						key:'stuId',
						data:this.schoolId
					})
					
					
					
				} catch(err) {
					console.log('我请求啦',err);
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				}
			},
			async getUesrQueryById() {
				    try {
						let {result} = await uesrQueryById({
				
							id:this.userId
						});
					if (result.url) {
					 this.headerPic = result.url
					}
					
					} catch (err) {
						// console.log('zjk:', err);
					}
					
					
				
			},
			changeNeedAddStudent(key){
				
				
				if (key == '0') {
					getApp().globalData.needAddChild = true
					uni.setStorage({
						key:'needAddChild',
						data:'0'
					})
				} else{
					uni.setStorage({
						key:'needAddChild',
						data:'1'
					})
					getApp().globalData.needAddChild = false
				}
				
			},
			btnChangeCheckbox(stuId){
				
				// debugger
				if (stuId == this.izDefaultIndexId) {
					return
				} else{
					this.NewDefaultStu(stuId);
				}
				
				
			},
			onSkipOrder(type) {
				
				if (this.AppLogin == false) {
					
					 uni.navigateTo({
						url:'../loginOne/loginOne'
					 })
					 
					 return
					
				}

				switch (type){
					case 0:
					uni.navigateTo({
						url: '../order/order?current=1',
					})
						break;
					
					case 1:
					uni.navigateTo({
						url: '../order/order?current=2'
					})
						break;
					case 2:
					uni.navigateTo({
						url: '../order/order?current=4',
					})
						break;
						
					case 3:
					uni.navigateTo({
						url: '../order/order?current=0',
					})
					   break
								
					default:
					uni.navigateTo({
						url: '../order/order?current=0',
					})
						break;
				}
					
			},
			//当前学生编辑
			btnEditChild(){
				
				if (this.AppLogin == false) {
					
					 uni.navigateTo({
						url:'../loginOne/loginOne'
					 })
					 
					 return
					
				}
				
				uni.setStorage({
					key:'fromType',
					data:'mine'
					
				})
				
				uni.navigateTo({
					url:'../myChildList/myChildList'
				})
			},
			
			btnShowHeaderClick(){
				let arr = [this.headerPic];
				
				// console.log('arr',arr);
				uni.previewImage({
					urls:arr
				})
			},
			myServiceClick(index) {
				
				if (this.AppLogin == false) {
					
					 uni.navigateTo({
						url:'../loginOne/loginOne'
					 })
					 
					 return
					
				}
				switch (index) {
					case 0:
						{   
						   uni.navigateTo({
							url: '../infoCenter/infoCenter'
						   })
						}
						break;
					case 1:
						{
							
							uni.navigateTo({
								url:'../addrList/addrList'
							})
							
							
						}
						break;
					case 2:
						{
						    
                            uni.navigateTo({
                            	url: '../setting/setting'
                            }) 
						}
						break;
					case 3:
						{
							uni.navigateTo({
								url:'../privateChat/privateChat'
							})

						}
						break;

				}
				

			},
			
			toSetting() {
				if (this.AppLogin == false) {
					
					 uni.navigateTo({
						url:'../loginOne/loginOne'
					 })
					 
					 return
					
				}
				
				uni.navigateTo({
					url: '/pages/mine/setting'
				})
			},
			gotoComDetail(){
				
				if (this.AppLogin == false) {
					
					 uni.navigateTo({
						url:'../loginOne/loginOne'
					 })
					 
					 return
					
				}
				
				uni.navigateTo({
					url: '/pages/companyDe/companyDe'
				})
			}
			
		},
		filters:{
			showSex: function(val){
				if(val == '1'){
					return '男'
				}else if(val == '2'){
					return '女'
				}else{
					return ''
				}
			}
		}
}
</script>

<style lang="scss">
	
	page{
		background-color: #F6F6F6;
		height: 100%;
	}
	.user {
		background-color: #F6F6F6;
	}

	.user_head {
		width: 100%;
		height: 400upx;
		background-color: #f8f8f8;
		position: relative;
        .baseImg{
			width: 100%;
			height: 400rpx;
		}
		.user-info {
			
			position: absolute;
			left: 0;
			bottom: 200rpx;
			z-index: 1;
			display: flex;
			flex-direction:row;
			align-items: center;
			
				.avater {
					// margin-top: 120rpx;
					margin-left: 46rpx;
					width: 124upx;
					height: 124upx;
					border-radius: 50%;
     
				}

				.nickName {
					
					// height: 110upx;
					font-size: 36upx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 110upx;
					margin-left: 28rpx;
					
				}
			
		}

		
	}
	.swiperContainer {
		width: 100%;
		height: 200rpx;
		.swiperItem {
			width: 100%;
			height: 100%;
		}
	}
	.company{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		height: 200rpx;
		padding: 0 20rpx;
		.comInfo{
			display: flex;
			
			image{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				
			}
			.comInfoDetail{
				font-size: 28rpx;
				margin-left: 20rpx;
				.nihao{
					color: #333;
					font-size: 32rpx;
					font-weight: 400;
				}
				.companyName{
					color: #333;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 26rpx;
				}
				.infoSex{
					color:#888888;
					font-size: 24rpx;
				}
				
			}
		}
		
	}
	
    .order-info {
    	// height: 230upx;
    	background: #FFFFFF;
    	border-radius: 20upx;
    	// display: flex;
		width: 690rpx;
	    position: absolute;
		top: 250rpx;
		left: 30rpx;
	
    	.oeder-menu {
    		display: flex;
    		// width: 100%;
    		// height: 140upx;
			background-color: #FFFFFF;
			margin: 20rpx 20rpx 0;
			padding: 25rpx 0;
    
    		.order-item {
    			display: flex;
    			flex-direction: column;
    			align-items: center;
    			justify-content: center;
    			width: 25%;
    			height: 100%;
    
    			.icon {
    				position: relative;
    				display: flex;
    				align-items: center;
    
    				.icon-image {
    					width: 48rpx;
    					height: 48rpx;
    				}
    
    				.num {
    					height: 30upx;
    					min-width: 30upx;
    					text-align: center;
    					position: absolute;
    					font-size: 22upx;
    					left: 25upx;
    					top: -10upx;
    					padding: 4upx;
    					color: #FFFFFF;
    					border-radius: 100%;
    					background-color: #C24E4E;
    				}
    
    			}
    
    			.title {
    				// width: 72upx;
    				height: 33upx;
    				font-size: 26upx;
    				font-weight: 400;
    				color: #333;
    				line-height: 33upx;
					margin-top: 20rpx;
    
    			}
    		}
    
    	}
    
    }
	
	
	.fuwu{
		// margin: 0 20rpx;
		// border-radius: 6rpx;
		margin-top: 20rpx;
	}
	.order-title {
		// margin-left: 20upx;
		// margin-right: 20upx;
		
		// padding: 0 20rpx;
		padding-left: 30rpx;
		padding-right: 25rpx;
		border-bottom: 1upx solid #f2f2f2;
		height: 95upx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		position: relative;
		background-color: #FFFFFF;
		
	    
		.title1 {
			// width: 120upx;
			height: 83upx;
			
			// line-height: 83upx;
			display: flex;
			align-items: center;
			image{
				width: 35rpx;
				height: 35rpx;
				padding-right: 10rpx;
			}
			.labTitle{
				font-size: 32upx;
				font-weight: 400;
				color: #333;
			}
		}
	    
		.title2 {
			// width: 96upx;
			height: 83upx;
			font-size: 24upx;
			font-weight: 400;
			color: #B0B0B8;
			line-height: 83upx;
			// position: absolute;
			// right: 40upx;
			
			.uni-icons{
				position: relative;
				right: -5rpx;
			}
	    
		}
	    
		.arrow {
			width: 12upx;
			height: 20upx;
			position: absolute;
			right: 10upx;
			
		}
	}
	
	.banner {
		width: 100%;
		height: 280upx;
		// background-color: #3F536E;
		// margin-top: 27upx;

		.swiper {
			margin-left: 20upx;
			margin-right: 20rpx;
			height: 100%;
			background-color: #007AFF;
			border-radius: 4upx;

			.swiperImage {
				width: 100%;
				height: 100%;
			}
		}
	}

	.myService {
		margin-top: 54upx;
		width: 100%;
		// height: 371upx;
		// background-color: #FFFFFF;

		.service {
			// height: 371upx;
			background: #FFFFFF;
			// margin-left: 20upx;
			// margin-right: 20upx;
			box-shadow: 0upx 4upx 7upx 2upx rgba(227, 227, 227, 0.5);
			// border-radius: 20upx;
			// background-color: #FFFFFF;

			.service-title {
			    padding-left: 30rpx;
				height: 95upx;
				font-size: 32upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 300;
				color: #333;
				line-height: 95upx;
				align-items: center;
				border-bottom: thin solid #f2f2f2;
				align-items: center;
				display: flex;
				image{
					width: 31rpx;
					height: 31rpx;
					padding-right: 10rpx;
					// position: relative;
					// top: 5rpx;
				}
			}

			.service-menu {
				margin-top: 15rpx;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				width: 100%;
				padding-bottom: 20rpx;
				// height: 290upx;

				.item {
					height: 145upx;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.icon {
						.icon-image {
							width: 48upx;
							height: 48upx;
						}
					}

					.title {

						height: 37upx;
						font-size: 28upx;
						font-weight: 400;
						color: #666;
						line-height: 37upx;
						margin-top: 18rpx;

					}
				}
			}
		}
	}
</style>
